import React, {useMemo} from 'react';
import {
  GestureResponderEvent,
  StyleProp,
  StyleSheet,
  View,
  ViewStyle,
} from 'react-native';
import RnButton from './RnButton';

export interface ButtonType {
  style?: StyleProp<ViewStyle>;
  children?: Element | string;
  fontSize?: number;
  color?: string;
  disabled?: boolean;
  onPress?: (event: GestureResponderEvent) => void;
  borderShow?: boolean;
  type?: 'default' | 'primary';
}
type styleType = {
  [key: string]: object;
};
const colors: Record<string, string> = {
  default: '#fff',
  primary: '#000',
};
export default function Button(props: ButtonType) {
  const {
    style,
    onPress,
    fontSize,
    children,
    borderShow,
    type = 'default',
    color,
  } = props;

  const borderStyle = useMemo(() => {
    let computed = borderShow ? {...styles.border} : {borderColor: ''};
    if (borderShow && type === 'primary') {
      console.log('borderStyle', borderStyle);
      computed.borderColor = '#E5F7A9';
    }
    if (color) {
      computed.borderColor = color;
    }
    return computed;
  }, [borderShow, color]);
  return (
    <View style={style}>
      <RnButton
        style={{...(styles as styleType)[type], ...borderStyle}}
        color={color || colors[type]}
        fontSize={fontSize}
        onPress={onPress}>
        {children}
      </RnButton>
    </View>
  );
}

const styles = StyleSheet.create({
  default: {
    paddingVertical: 5,
    borderRadius: 12,
  },
  primary: {
    paddingVertical: 5,
    paddingHorizontal: 8,
    borderRadius: 12,
    backgroundColor: '#E5F7A9',
    borderColor: '#E5F7A9',
  },
  border: {
    paddingVertical: 5,
    paddingHorizontal: 8,
    borderRadius: 12,
    borderColor: '#fff',
    borderWidth: 0.5,
  },
});
